<template>
  <div class="customer-service-container">
    <div class="container">
      <h1 class="page-title">客服与投诉</h1>
      
      <div class="service-content">
        <!-- 常见问题部分 -->
        <section class="faq-section">
          <h2 class="section-title">常见问题</h2>
          <div class="faq-list">
            <div v-for="faq in faqList" :key="faq.id" class="faq-item">
              <div class="faq-question" @click="toggleFaq(faq.id)">
                <span>{{ faq.question }}</span>
                <svg class="faq-icon" :class="{ 'rotate': activeFaq === faq.id }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </div>
              <div class="faq-answer" :class="{ 'show': activeFaq === faq.id }">
                <p>{{ faq.answer }}</p>
              </div>
            </div>
          </div>
        </section>
        
        <!-- 联系客服部分 -->
        <section class="contact-section">
          <h2 class="section-title">联系客服</h2>
          <div class="contact-options">
            <div class="contact-item">
              <div class="contact-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                </svg>
              </div>
              <div class="contact-info">
                <h3>在线客服</h3>
                <p>工作时间：09:00 - 22:00</p>
                <button class="btn btn-primary" @click="openOnlineService">立即咨询</button>
              </div>
            </div>
            
            <div class="contact-item">
              <div class="contact-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                </svg>
              </div>
              <div class="contact-info">
                <h3>电话客服</h3>
                <p>400-123-4567</p>
                <p>工作时间：09:00 - 18:00</p>
              </div>
            </div>
          </div>
        </section>
        
        <!-- 投诉表单部分 -->
        <section class="complaint-section">
          <h2 class="section-title">提交投诉</h2>
          <form class="complaint-form" @submit.prevent="submitComplaint">
            <div class="form-group">
              <label for="complaint-type">投诉类型</label>
              <select id="complaint-type" v-model="complaint.type" required>
                <option value="">请选择投诉类型</option>
                <option value="content">内容违规</option>
                <option value="copyright">版权侵犯</option>
                <option value="account">账号问题</option>
                <option value="payment">支付问题</option>
                <option value="other">其他问题</option>
              </select>
            </div>
            
            <div class="form-group">
              <label for="complaint-title">问题标题</label>
              <input type="text" id="complaint-title" v-model="complaint.title" placeholder="请简要描述您的问题" maxlength="50" required>
            </div>
            
            <div class="form-group">
              <label for="complaint-description">问题描述</label>
              <textarea id="complaint-description" v-model="complaint.description" rows="6" placeholder="请详细描述您遇到的问题" maxlength="500" required></textarea>
              <span class="char-count">{{ complaint.description.length }}/500</span>
            </div>
            
            <div class="form-group">
              <label for="contact-method">联系方式</label>
              <input type="text" id="contact-method" v-model="complaint.contact" placeholder="请留下您的邮箱或手机号" required>
            </div>
            
            <div class="form-group">
              <label class="upload-label">
                <span>上传截图（可选）</span>
                <input type="file" @change="handleFileUpload" accept="image/*" multiple>
              </label>
              <div v-if="uploadedFiles.length > 0" class="file-list">
                <div v-for="(file, index) in uploadedFiles" :key="index" class="file-item">
                  <span>{{ file.name }}</span>
                  <button type="button" class="remove-file" @click="removeFile(index)">×</button>
                </div>
              </div>
            </div>
            
            <div class="form-actions">
              <button type="reset" class="btn btn-secondary" @click="resetForm">重置</button>
              <button type="submit" class="btn btn-primary" :disabled="isSubmitting">
                <span v-if="!isSubmitting">提交投诉</span>
                <span v-else>提交中...</span>
              </button>
            </div>
          </form>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { isLoggedIn } from '../services/auth'

const router = useRouter()
const activeFaq = ref(null)
const isSubmitting = ref(false)
const uploadedFiles = ref([])

// 常见问题列表
const faqList = [
  {
    id: 1,
    question: '如何修改个人资料？',
    answer: '登录后点击右上角头像，选择"个人中心"，在个人资料页面可以修改昵称、头像、简介等信息。修改完成后点击"保存"按钮即可。'
  },
  {
    id: 2,
    question: '如何下载视频？',
    answer: '目前平台暂不支持直接下载视频功能。您可以通过收藏视频或添加到播放列表来方便地找到您喜欢的内容。'
  },
  {
    id: 3,
    question: '为什么视频无法播放？',
    answer: '视频无法播放可能有以下原因：1. 网络连接不稳定；2. 浏览器兼容性问题，建议使用Chrome、Firefox等主流浏览器；3. Flash插件未安装或版本过低；4. 视频内容正在审核中。如问题持续，请联系客服。'
  },
  {
    id: 4,
    question: '如何举报不良内容？',
    answer: '在视频播放页面，点击视频下方的"更多"按钮，选择"举报"选项，选择举报类型并填写相关说明，提交后我们会尽快处理。'
  },
  {
    id: 5,
    question: '会员有哪些特权？',
    answer: '开通会员后，您可以享受以下特权：1. 无广告观看体验；2. 高清视频画质；3. 独家会员内容；4. 下载缓存功能；5. 离线观看；6. 多设备登录。'
  }
]

// 投诉表单数据
const complaint = reactive({
  type: '',
  title: '',
  description: '',
  contact: ''
})

// 切换FAQ展开/收起
function toggleFaq(id) {
  activeFaq.value = activeFaq.value === id ? null : id
}

// 打开在线客服
function openOnlineService() {
  // 检查登录状态
  if (!isLoggedIn()) {
    router.push({ name: 'login', query: { redirect: '/customer-service' } })
    return
  }
  
  alert('正在连接在线客服，请稍候...')
  // 实际项目中应该打开在线客服窗口或聊天组件
}

// 处理文件上传
function handleFileUpload(event) {
  const files = event.target.files
  if (files) {
    for (let i = 0; i < files.length; i++) {
      // 限制文件大小（5MB）
      if (files[i].size > 5 * 1024 * 1024) {
        alert(`${files[i].name} 文件大小超过5MB，请选择更小的文件`)
        continue
      }
      uploadedFiles.value.push(files[i])
    }
  }
  // 清空input，允许重复选择同一个文件
  event.target.value = ''
}

// 移除上传的文件
function removeFile(index) {
  uploadedFiles.value.splice(index, 1)
}

// 重置表单
function resetForm() {
  complaint.type = ''
  complaint.title = ''
  complaint.description = ''
  complaint.contact = ''
  uploadedFiles.value = []
}

// 提交投诉
function submitComplaint() {
  // 检查登录状态
  if (!isLoggedIn()) {
    router.push({ name: 'login', query: { redirect: '/customer-service' } })
    return
  }
  
  isSubmitting.value = true
  
  // 模拟API请求
  setTimeout(() => {
    isSubmitting.value = false
    alert('投诉提交成功，我们会尽快处理您的问题')
    resetForm()
  }, 1500)
  
  // 实际项目中应该调用API提交投诉数据
  console.log('提交投诉:', {
    ...complaint,
    files: uploadedFiles.value.map(file => file.name)
  })
}
</script>

<style scoped>
.customer-service-container {
  padding: 20px 0;
  min-height: calc(100vh - 200px);
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 30px;
  color: #333;
}

.service-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 2px solid #007bff;
}

/* FAQ部分样式 */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #f8f9fa;
  cursor: pointer;
  transition: background 0.3s;
}

.faq-question:hover {
  background: #e9ecef;
}

.faq-question span {
  font-weight: 500;
  color: #333;
  flex: 1;
}

.faq-icon {
  transition: transform 0.3s;
}

.faq-icon.rotate {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background: #fff;
}

.faq-answer.show {
  max-height: 500px;
}

.faq-answer p {
  padding: 15px 20px;
  margin: 0;
  color: #666;
  line-height: 1.6;
}

/* 联系客服部分样式 */
.contact-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.contact-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.contact-icon {
  width: 60px;
  height: 60px;
  background: #007bff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.contact-info h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #333;
}

.contact-info p {
  margin: 4px 0;
  color: #666;
  font-size: 14px;
}

/* 投诉表单部分样式 */
.complaint-form {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #007bff;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.char-count {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.upload-label {
  display: inline-block;
  padding: 10px 20px;
  background: #f8f9fa;
  border: 2px dashed #ddd;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.upload-label:hover {
  background: #e9ecef;
  border-color: #007bff;
}

.upload-label input {
  display: none;
}

.file-list {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  background: #f8f9fa;
  border-radius: 4px;
  font-size: 14px;
  max-width: 300px;
}

.file-item span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remove-file {
  background: #ff4757;
  color: white;
  border: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 30px;
}

.btn {
  padding: 10px 25px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover {
  background: #0056b3;
}

.btn-primary:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #5a6268;
}

@media (max-width: 768px) {
  .contact-options {
    grid-template-columns: 1fr;
  }
  
  .complaint-form {
    padding: 20px;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;
  }
}
</style>